<template>
	<view>
		<!-- 轮播图 -->
		<swiper indicator-dots="true" :autoplay="false" interval="5000">
			<swiper-item>
				<image src="/static/images/order-images/show-1.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/order-images/show-2.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/order-images/show-3.jpg"></image>
			</swiper-item>
		</swiper>
		<!-- 预约表单 -->
		<view class="project">
			<u--form :model="project" ref="add" :errorType="errorType" :rules="rules">

				<!-- 选择的服务 -->
				<view class="item">
					<u-form-item label="预约服务" prop="projectname" borderBottom labelWidth="70" @click="ProShow = true">
						<u--input v-model="project.projectname" disabled disabledColor="#ffffff" placeholder="请选择预约服务"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</view>

				<!-- 预约的上门地址 -->
				<view class="item">
					<u-form-item label="上门地址" labelWidth="70" prop="address" @click="AddrShow = true">
						<u--input v-model="project.address" disabled disabledColor="#ffffff" placeholder="请选择上门地址"
							border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right">
						</u-icon>
					</u-form-item>
				</view>

				<!-- 预约时间 -->
				<view class="item">
					<u-form-item label="预约时间" labelWidth="70" prop="createtime_text" @click="DateShow = true">
						<u--input v-model="project.createtime_text" disabled disabledColor="#ffffff"
							placeholder="请选择预约时间" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right">
						</u-icon>
					</u-form-item>
				</view>

				<!-- 预约备注 -->
				<view class="item">
					<u-form-item labelWidth="70" prop="content">
						<u--textarea v-model="project.content" placeholder="请输入预约备注" height="70" count="true"
							border="none">
						</u--textarea>
					</u-form-item>
				</view>

				<!-- 提交按钮 -->
				<view class='but'>
					<button form-type="submit" @click="submit">我要预约</button>
				</view>
			</u--form>
		</view>

		<!-- 预约服务的选择器 -->
		<u-picker :show="ProShow" :columns="prolist" keyName="name" @confirm="ProChange" @cancel="ProShow = false">
		</u-picker>

		<!-- 上门地址 -->
		<u-picker :show="AddrShow" :columns="addrlist" keyName="name" @confirm="AddrChange" @cancel="AddrShow = false">
		</u-picker>

		<!-- 预约时间 -->
		<u-datetime-picker ref="datetimePicker" :show="DateShow" v-model="project.createtime" mode="datetime"
			:formatter="formatter" @confirm="DateChange" @cancel="DateShow = false"></u-datetime-picker>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				project: {
					projectid: 0,
					projectname: '',
					addrid: 0,
					address: '',
					createtime: Number(new Date()),
					createtime_text: '',
					content: ''
				},
				errorType: ['toast'],
				rules: {
					projectname: [{
						required: true,
						message: '请选择预约服务',
						trigger: ['change', 'blur'],
					}],
					address: [{
						required: true,
						message: '请选择上门地址',
						trigger: ['change', 'blur'],
					}],
					createtime_text: [{
						required: true,
						message: '请选择预约时间',
						trigger: ['change', 'blur'],
					}],
				},
				AddrShow: false,
				DateShow: false,
				ProShow: false,
				prolist: [],
				addrlist: [],
				LoginUser: null
			}
		},
		onLoad() {

			//验证是否有登陆
			this.$u.auth.check()

			this.LoginUser = uni.getStorageSync('LoginUser')

			//请求预约服务
			this.TypeData()

			//请求收货地址
			this.AddressData()
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			async submit() {
				let data = {
					userid: this.LoginUser.id,
					addrid: this.project.addrid,
					projectid: this.project.projectid,
					content: this.project.content,
					createtime: this.project.createtime
				}
				this.$refs.add.validate().then(async (valid) => {
					if (!valid) {
						//表单没通过，消息提醒
						this.$refs.notice.show({
							type: 'error',
							message: '资料填写有误请仔细检查'
						})

						return false
					}
					let result = await this.$u.api.project.ProjectAdd(data);

					if (result.code == '1') {
						//提醒，返回上一个界面
						this.$refs.uToast.show({
							message: result.msg,
							type: 'success',
							complete: () => {
								uni.$u.route({
									url: result.url
								})
							}
						})
					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: result.msg
						})

						return false
					}
				})

			},
			ProChange(val) {
				this.ProShow = false
				this.project.projectname = val.value[0].name
				this.project.projectid = val.value[0].id
			},
			AddrChange(val) {
				this.AddrShow = false
				this.project.address = val.value[0].name
				this.project.addrid = val.value[0].id
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			DateChange(val) {
				this.DateShow = false
				this.project.createtime = val.value
				//现在的时间的时间戳
				var now = Number(new Date()) + (3600 * 1000)

				if (this.project.createtime < now) {
					this.$refs.uToast.show({
						type: 'error',
						message: '预约至少6小时以上'
					})

					return false
				}
				this.project.createtime_text = this.Format(this.project.createtime)
			},
			// 时间戳转化成年月日时分
			Format(value, format = "yyyy-MM-dd hh:mm") {
				Date.prototype.Format = function(fmt) { //author: meizz 
					var o = {
						"M+": this.getMonth() + 1, //月份 
						"d+": this.getDate(), //日 
						"h+": this.getHours(), //小时 
						"m+": this.getMinutes(), //分 
						"s+": this.getSeconds(), //秒 
						"q+": Math.floor((this.getMonth() + 3) / 3), //季度 
						"S": this.getMilliseconds() //毫秒 
					};
					/*
						y+匹配到的内容可能通过分组来取到
						RegExp.$1 是第一个匹配结果 
						replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
						substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符
					*/
					if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1
						.length));
					for (var k in o)
						if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
							(o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
					return fmt;
				}
				return new Date(value).Format(format)
			},
			async TypeData() {
				let resutl = await this.$u.api.project.TypeIndex()

				if (resutl.code == '1') {
					this.prolist.push(resutl.data)
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: '没有服务选项'
					})

					return false
				}
			},
			async AddressData() {
				let resutl = await this.$u.api.user.AddressIndex({
					userid: this.LoginUser.id
				})
				let region = []
				if (resutl.code == '1') {
					resutl.data.forEach((item) => {
						region.push({
							id: item.id,
							name: item.region_text + "-" + item.address
						})
					})
					this.addrlist.push(region)
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(247, 247, 247);
	}

	swiper {
		width: 100%;
		height: 400rpx;
		margin-bottom: 50rpx;
	}

	swiper image {
		width: 100%;
		height: 400rpx;
	}

	.service {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.service {
		width: 670rpx;
		height: auto;
		padding: 20rpx 45rpx 20rpx 35rpx;
		border-bottom: 1rpx solid #CCCCCC;
	}

	.service-name {
		width: 80%;
		font-size: 36rpx;
	}

	.service-price {
		font-size: 36rpx;
	}

	picker {
		color: #000;
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 36rpx;
		border: 1rpx solid #CCC;
		margin: 20rpx;
		box-shadow: 0 0 10px #DDD;
	}

	button {
		width: 400rpx;
		background-color: #0173DE;
		color: white;
		opacity: 0.7;
		box-shadow: 0 0 10px #DDD;
		font-size: 34rpx;
	}

	.button-hover {

		color: white;
		opacity: 1;
		background-color: #0173DE;
	}

	.but {
		margin-top: 50rpx;
	}

	picker view {
		font-size: 30rpx;
	}

	.project {
		width: 90%;
		margin: 0 auto;
	}

	.project .item {
		color: #000;
		padding: 0rpx 20rpx;
		border-radius: 20rpx;
		font-size: 36rpx;
		border: 1rpx solid #CCC;
		margin: 20rpx;
		box-shadow: 0 0 10px #DDD;
		background-color: #fff;
	}

	.project .item .u-form-item {
		padding: 0rpx;
	}

	.project .u-input {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
